<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8" v-if="planning.status == 'PREPARE' && optType != 'view' && optType != 'save'">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-plus" size="mini" @click="handleAdd">选择产品制程</el-button>
      </el-col>
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>
    <div class="info-container">
      <div class="info-item">
        <span>bom编号:</span>
        <span class="content">{{ bomCode }}</span>
      </div>
      <div class="info-item">
        <span>工艺流程编码:</span>
        <span class="content">{{ routeCode }}</span>
      </div>
      <div class="info-item">
        <span>工艺流程名称:</span>
        <span class="content">{{ routeName }}</span>
      </div>
    </div>
    <el-table
      border
      v-if="refreshTable"
      v-loading="loading"
      :data="planningbomList"
      row-key="lineId"
      :default-expand-all="true"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        label="产品/物料名称"
        width="200"
        align="left"
        prop="productName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="产品/物料编号"
        width="120"
        align="center"
        prop="productCode"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="物料类型" width="120" align="center" prop="itemOrProduct" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mes_item_product" :value="scope.row.itemOrProduct" />
        </template>
      </el-table-column>
      <el-table-column label="规格型号" align="center" prop="bomSpc" :show-overflow-tooltip="true" />
      <el-table-column label="单位" align="center" prop="unitOfMeasure" :show-overflow-tooltip="true" />
      <el-table-column label="图号" width="100" align="center" prop="remark" :show-overflow-tooltip="true"/>
      <el-table-column label="BOM" width="150" align="center" prop="bomCode" :show-overflow-tooltip="true"/>
      <el-table-column label="使用量" align="center" prop="used" />
      <!--      <el-table-column label="使用比例" align="center" prop="proportional" />-->
      <el-table-column label="规格" align="center" prop="model" :show-overflow-tooltip="true"/>
      <el-table-column label="规格单位" align="center" prop="specificationUnit"/>
    </el-table>

    <!-- 选择生产工单BOM组成对话框 -->
    <PlanningBomItemSelect
      ref="bomItemSelect"
      :productId="this.productId"
      @onSelected="onBomItemSelected"
    ></PlanningBomItemSelect>
  </div>
</template>

<script>
import { addBom, listBom } from '@/api/mes/pro/planningbom';
import PlanningBomItemSelect from '@/components/proPlanningBomSelect/single.vue';
import { getRouteproduct } from "@/api/mes/pro/routeproduct";

export default {
  name: 'Planningbom',
  components: { PlanningBomItemSelect },
  dicts: ['mes_item_product'],
  data() {
    return {
      globalLineIdCounter: 1000000,
      productId: null,
      // 重新渲染表格状态
      refreshTable: true,
      // 遮罩层
      loading: true,
      // 生产工单BOM组成表格数据
      planningbomList: [],
      bomId: undefined,
      bomCode: undefined,
      bomName: undefined,
      routeCode: undefined,
      routeName: undefined,
      showFlag: false,
      recordId: undefined,
      // 查询参数
      queryParams: {
        planId: null,
        planCode:null
      }
    };
  },
  props: {
    planning: undefined,
    optType: undefined
  },
  watch: {
    'planning.planId': function (newPlanId, oldPlanId) {
      if (newPlanId !== oldPlanId) {
        this.getList();
      }
    },
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询生产工单BOM组成列表 */
    getList() {
      this.loading = true;
      this.queryParams.planId = this.planning.planId;
      this.queryParams.planCode=this.planning.planCode;
      if (this.planning.attr1) {
        getRouteproduct(this.planning.attr1).then(response => {
          this.routeCode = response.data.routeCode;
          this.routeName = response.data.routeName;
          this.bomId = response.data.bomId;
          this.bomCode = response.data.bomCode;
          this.bomName = response.data.bomName;
        })
      }
      listBom(this.queryParams).then(response => {
        const uniqueData = Array.from(new Map(
          response.data.map(item => [`${item.productId}_${item.bomId}_${item.parentId}`, item])
        ).values());
        var types = this.handleTree(uniqueData, 'bomId', 'parentId');
        const keyedTree = this.assignUniqueLineIds(types);
        this.planningbomList = keyedTree;
        this.loading = false;
      });
    },

    handleAdd() {
      this.productId = this.planning.productId;
      this.$refs.bomItemSelect.showFlag = true;
    },
    //bom选择
    onBomItemSelected(obj) {
      if (obj != undefined && obj != null) {
        this.bomId = obj.bomId;
        this.planning.attr1 = obj.recordId;
        this.form = {
          bomId: obj.bomId,
          planId: this.planning.planId,
          attr1: obj.recordId,
        };
        addBom(this.form).then(response => {
          this.$modal.msgSuccess('新增成功');
          this.getList();
        });
      }
    },
    assignUniqueLineIds(data, parent = null) {
      return data.map(item => {
        const newItem = { ...item }; // 浅拷贝
        newItem.lineId = this.globalLineIdCounter++; // 重新分配 lineId，确保唯一

        if (newItem.children && newItem.children.length > 0) {
          // 注意：不能直接使用 newItem.children，要重新拷贝！
          newItem.children = this.assignUniqueLineIds([...newItem.children], newItem);
        }

        return newItem;
      });
    }
  }
};
</script>
<style scoped>
.info-container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.info-item {
  width: 30%; /* Adjust width as needed */
  margin-bottom: 10px;
}

.info-item span {
  margin-left: 10px;
}

.info-item span:first-child {
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #262626;
  text-align: left;
  line-height: 20px;
  display: inline-block;
}

.content {
  color: #8c8c8c;
  text-align: left;
}
</style>
